import React, { Component } from 'react';
// 增强组件拥有过度动画效果
import {CSSTransition} from 'react-transition-group';
// import  '@/app.css';
import 'animate.css'
const withTransition = Cmp =>{
    return class extends Component{
        render(){
            return (      
                    <CSSTransition
                        in={this.props.match}
                        timeout={600}
                        //className='dw'
                        classNames={{
                            enter:'animate__animated',
                            enterActive:'fadeOutLeft',
                            exit:'animate__animated',
                            exitActive:'fadeOutRight'

                        }}
                        unmountOnExit
                    >
                        {
                            this.props.match ? <Cmp {...this.props}/> : <div></div>
                        }
                        
                    </CSSTransition>
            )
        }
    }
}
export default withTransition